<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .flex-area {
        background: gold; /*背景色*/
        display: flex; /*弹性布局*/
        height: 100px; /*高度*/
    }

    .cell {
        flex: 1; /*弹性伸缩*/
        border: 1px solid red; /*边框*/
        display: flex; /*弹性布局*/
        flex-direction: row; /*弹性方向*/
    }

    .box {
        width: 20px; /*宽度*/
        height: 20px; /*高度*/
        margin: 2px; /*外边距*/
        border: 2px solid green; /*边框*/
        background: green;
    }
</style>
</head>
<body>
<section class="flex-area" style="height:30px;">
    <article class="cell"></article>
    <article class="cell">主轴: flex-start</article>
    <article class="cell">主轴: center</article>
    <article class="cell">主轴: flex-end</article>
    <article class="cell">主轴: space-between</article>
    <article class="cell">主轴: space-evenly</article>
    <article class="cell">主轴: space-around</article>
</section>
<section class="flex-area">
    <article class="cell">副轴: flex-start</article>
    <article class="cell" style="justify-content: flex-start; align-items: flex-start;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: center; align-items: flex-start;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: flex-end; align-items: flex-start;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: space-between; align-items: flex-start;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: space-evenly; align-items: flex-start;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: space-around; align-items: flex-start;">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </article>
</section>
<section class="flex-area">
    <article class="cell">副轴: center</article>
    <article class="cell" style="justify-content: flex-start; align-items: center;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: center; align-items: center;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: flex-end; align-items: center;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: space-between; align-items: center;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: space-evenly; align-items: center;">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </article>
    <article class="cell" style="justify-content: space-around; align-items: center;">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </article>
</section>
</body>
</html>